<template>
<div class="data-analysis">
  <bread>
    <h1>发文分析</h1>
    <small>本院成员在各个级别期刊上的发文情况</small>
  </bread>
  <page-content isCard>
    <section v-for="o in 4" :key="o">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>机构论文影响力</span>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link filter-block">
              时间：近五年：14-今天<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>选项</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link filter-block">
              排名：一作及通讯<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>选项</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown trigger="click">
            <span class="el-dropdown-link filter-block">
              机构：全部范围
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>选项</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-dropdown class="pull-right" split-button type="success" size="small">
            更多菜单
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>导出excel</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <el-table stripe :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="180">
          </el-table-column>
          <el-table-column prop="address" label="地址">
          </el-table-column>
          <el-table-column prop="zip" label="邮编">
          </el-table-column>
          <el-table-column prop="province" label="省份">
          </el-table-column>
        </el-table>
        <div class="more-info">
          <span>查看更多</span>
        </div>
      </el-card>
    </section>
    <section>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>历史发文统计</span>
          <span class="select">
            <el-radio v-model="radio" label="1">按国际</el-radio>
            <el-radio v-model="radio" label="2">按国内</el-radio>
          </span>
          <el-dropdown class="pull-right" split-button type="success" size="small">
            更多菜单
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>下载图片</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div id="trend-chart">
        </div>
      </el-card>
    </section>
  </page-content>
</div>
</template>
<script>
import echartsOption from '@/pages/Index/OverView/Home/echartsOption';
export default {
  mounted() {
    require.ensure([], (require) => {
      const echarts = require('echarts');
      this.trendChart = echarts.init(document.getElementById('trend-chart'));
      this.trendChart.setOption(echartsOption);
    });
  },
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      radio: '1',
    }
  }
}
</script>
<style  scoped lang="scss">
  .filter-block {
    margin-left: 10px;
    padding-left: 15px;
    border-left: 1px solid #979797;
  }
  .el-card {
    color: var(--header-bgcolor);
    margin-bottom: 20px;
  }
  .more-info {
    border-bottom: 1px solid #E5E9F2;
    text-align: center;
    margin: 8px 0;
    color: #C0CCDA;
    span {
      position: relative;
      top: 10px;
      background-color: #fff;
      padding: 10px;
    }
  }
  #trend-chart {
    height: 450px;
  }
  .select {
    margin-left: 20px;
  }
</style>
<style lang="scss">
.data-analysis {
  .el-card__header {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
  }
}
</style>


